import 'package:extended_tabs/extended_tabs.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:visibility_detector/visibility_detector.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/module/record/dbmain_logic.dart';
import 'package:ball_lion/resources/styles.dart';
import 'package:ball_lion/widgets/base/wqs_indicator.dart';
import 'package:ball_lion/widgets/loading/loading_widget.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';

class DBMainPage extends StatefulWidget {
  const DBMainPage({super.key});

  @override
  State<DBMainPage> createState() => _DBMainPageState();
}

class _DBMainPageState extends State<DBMainPage> {
  final DBMainLogic logic = Get.put(DBMainLogic());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<DBMainLogic>(builder: (logic) {
      return VisibilityDetector(
        key: const Key("DBMain"),
        onVisibilityChanged: (VisibilityInfo info) {
          if (!info.visibleBounds.isEmpty) {
            //Utils.onEvent("sj_sjk");
          }
        },
        child: LoadingWidget<bool>(
          isLoading: logic.isLoading,
          loading: Container(),
          data: false,
          reconnect: logic.getRefresh,
          child: () => Stack(
            alignment: AlignmentDirectional.topCenter,
            children: [
              Image.asset(Utils.getImgPath("db_header_bg.png"),
                  width: Get.width, height: Get.width * 174 / 375),
              SafeArea(
                child: Column(children: [
                  Row(
                    children: [
                      Expanded(
                        child: SizedBox(
                          height: 44,
                          child: Styles.tabbar(
                            scrollable: true,
                            labelColor: Colours.N9,
                            unselectedLabelColor: Colours.N8,
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                            unselectedFontWeight: FontWeight.w400,
                            indicator: const QsIndicator(
                                borderSide:
                                    BorderSide(color: Colours.B5, width: 3),
                                indicatorWidth: 12,
                                indicatorHeight: 4,
                                indicatorBottom: 4),
                            controller: logic.zqController,
                            onTap: (value) {},
                            labelPadding: const EdgeInsets.only(
                                top: 10, left: 10, right: 10),
                            tabs: logic.tabList.map((e) => QsText(e)).toList(),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Expanded(
                    child: ExtendedTabBarView(
                        controller: logic.zqController,
                        children: logic.channelPages),
                  )
                ]),
              ),
            ],
          ),
        ),
      );
    });
  }
}
